<template>
  <div class="echart" id="prefor"></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  mounted() {
    var chartDom = document.getElementById("prefor");
    var myChart = echarts.init(chartDom);
    var option = {
      title: {
        text: "C端站点性能监控",
        subtext: "虚拟数据",
        left: "center"
      },
      series: [
        {
          type: "gauge",
          startAngle: 90,
          endAngle: -270,
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: "#464646"
            }
          },
          axisLine: {
            lineStyle: {
              width: 40
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          data: [
            {
              value: 98,
              name: "Perfect",
              title: {
                offsetCenter: ["0%", "-30%"]
              },
              detail: {
                offsetCenter: ["0%", "-20%"]
              }
            },
            {
              value: 90,
              name: "Good",
              title: {
                offsetCenter: ["0%", "0%"]
              },
              detail: {
                offsetCenter: ["0%", "10%"]
              }
            },
            {
              value: 95,
              name: "Commonly",
              title: {
                offsetCenter: ["0%", "30%"]
              },
              detail: {
                offsetCenter: ["0%", "40%"]
              }
            }
          ],
          title: {
            fontSize: 14
          },
          detail: {
            width: 50,
            height: 14,
            fontSize: 14,
            color: "auto",
            borderColor: "auto",
            borderRadius: 20,
            borderWidth: 1,
            formatter: "{value}%"
          }
        }
      ]
    };
    option && myChart.setOption(option);
  }
};
</script>
<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 480px;
  background: #fff;
  margin: 20px 0;
  padding: 20px 0;
}
</style>
